<!--  分站管理————————》   分站列表 -->
<template>
  <div>
    <a-row>
      <a-col :span="24">
        <a-card :bordered="false">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :xl="5" :lg="4" :md="3" :sm="24">
                  <a-form-item label="分站名称">
                    <a-input placeholder="请输入分站名称" v-model="queryParam.name"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :xl="5" :lg="4" :md="3" :sm="24">
                  <a-form-item label="分站类型">
                    <j-dict-select-tag placeholder="请选择分站类型" dictCode="mk_site_type" v-model="queryParam.siteType"/>
                  </a-form-item>
                </a-col>
                <a-col :xl="5" :lg="4" :md="3" :sm="24">
                  <a-form-item label="支付宝姓名" >
                    <a-input placeholder="支付宝姓名"  v-model="queryParam.contactPerson"/>
                  </a-form-item>
                </a-col>
                <a-col :xl="5" :lg="4" :md="3" :sm="24">
                  <a-form-item label="支付宝账号">
                    <a-input placeholder="支付宝账号"  v-model="queryParam.mobile"/>
                  </a-form-item>
                </a-col>
                <a-col :xl="5" :lg="4" :md="3" :sm="24">
                  <a-form-item label="是否设置总部抽成比例">
                    <j-dict-select-tag placeholder="请选择" dictCode="yn" v-model="queryParam.rateYn"/>
                  </a-form-item>
                </a-col>
                <a-col :xl="5" :lg="4" :md="3" :sm="24">
                  <a-form-item label="是否设置待结算时间">
                    <j-dict-select-tag placeholder="请选择" dictCode="yn" v-model="queryParam.settletYn"/>
                  </a-form-item>
                </a-col>
                <a-col :xl="5" :lg="4" :md="3" :sm="24">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                      <a-button type="primary"  @click="searchQuery" icon="search">查询</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 查询区域-END -->

          <!-- table区域-begin -->
          <div>
            <a-table
              ref="table"
              size="middle"
              :scroll="{x:true}"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              class="j-table-force-nowrap"
              @change='handleTableChange'
             >
              <span slot="action" slot-scope="text, record">
                  <a @click="setting(record)">设置</a>
              </span>
            </a-table>
          </div>
          <a-modal
            :title="set.title"
            :visible="set.visibleFlag"
            @cancel="setCancel"
            cancelText='取消'
            okText='确定'
            @ok="setOk"
          >
            <a-form  :label-col="{ span: 7 }" :wrapper-col="{ span: 13 }">
              <a-row :gutter="24">
                <a-col :xl="24" :lg="24" :md="24" :sm="24">
                  <a-form-item label="支付宝提现姓名" >
                    <a-input placeholder="请输入支付宝提现姓名" v-model="set.site.contactPerson"></a-input>
                  </a-form-item>
                  <a-form-item label="支付宝提现账号" >
                    <a-input placeholder="请输入支付宝提现账号" v-model="set.site.mobile"></a-input>
                  </a-form-item>
                  <a-form-item label="总部抽成比例" >
<!--                    <a-input placeholder="请输入总部抽成比例（单位：%）" @change='rateChange' v-model="set.site.sysRakeRate"></a-input>-->
                    <a-input-number
                      :default-value="1"
                      :min="0"
                      :max="100"
                      :formatter="value => `${value}%`"
                      :parser="value => value.replace('%', '')"
                      v-model="set.site.sysRakeRate"
                      :precision="2"
                    /><span>请填写1到100之间的数字</span>
                  </a-form-item>
                  <a-form-item label="待结算时间" >
                    <a-input-number v-model="set.site.settlementTime" :min="1" :max="365" :precision="0"  :formatter="value => `${value}天`" :parser="value => value.replace('天', '')"></a-input-number>
                    <span>请填写1到365之间的数字</span>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-modal>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JVxeRadioCell from '../../components/JVxeCells/JVxeRadioCell'
  import { postAction } from '../../api/manage'

  export default {
    name: 'SubSiteList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      JVxeRadioCell
      //SiteModal
    },
    data () {
      return {
        description: '分站数据列表',
        // 表头
        columns: [
            {
              title: '序号',
              dataIndex: '',
              key:'rowIndex',
              width:60,
              align:"center",
              customRender:function (t,r,index) {
                return parseInt(index)+1;
              }
            },
            {
              title:'分站名称',
              align:"center",
              dataIndex: 'name',
            },
            {
              title:'类型',
              align:"center",
              dataIndex: 'siteType_dictText',
            },
            {
              title:'联系人',
              align:"center",
              dataIndex: 'contactPerson',
            },
            {
              title: '联系方式',
              align:"center",
              dataIndex: 'mobile',
            },
          {
            title:'总部抽成比例（单位：%）',
            align:"center",
            dataIndex: 'sysRakeRate',
          },
          {
            title: '结算时间（单位：天）',
            align:"center",
            dataIndex: 'settlementTime',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed: 'right',
            width:"100px",
            scopedSlots: { customRender: 'action' },
          }
        ],
        set:{
          title:'',
          visibleFlag:false,
          site:{
            contactPerson:"",
            mobile:"",
            sysRakeRate:"",
            settlementTime:"",
            id:""
          }
        },
        // 右侧表头
        url: {
          list: "/site/list",
          setting:"/site/set"
        }
      }
    },
    created() {

    },
    computed: {
      // importExcelUrl: function(){
      //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      // },
    },
    watch: {

    },
    methods: {
      setting(record){
        this.set.site = record;
        console.log("record--->   ",record)
        this.set.title="设置分站”"+record.name+"“的提现信息、抽成比例、待结算时间"
        this.set.visibleFlag=true;
      },
      setCancel(){
        this.set.visibleFlag=false;
        this.loadData();
      },
      setOk(){
        const self = this;
        postAction(self.url.setting,self.set.site).then(res=>{
          if (res.success) {
              self.set.visibleFlag = false;
              self.$message.success("设置成功！");
              this.loadData();
            } else {
              self.$message.warning(res.message);
            }
        })
      },
      rateChange(e){
         this.set.site.sysRakeRate = this.set.site.sysRakeRate.replace(/[^\d.]/g,'');
        this.set.site.sysRakeRate = this.set.site.sysRakeRate.replace(/\.{2,}/g,'.');
        this.set.site.sysRakeRate = this.set.site.sysRakeRate.replace(/^\./g,'');
        this.set.site.sysRakeRate = this.set.site.sysRakeRate.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
        this.set.site.sysRakeRate = this.set.site.sysRakeRate.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
      },

    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>